<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.js"></script>

</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div id="toolbar" data-options="region:'north'">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" id="loadAllDataBtn">所有用户</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" id="addBtn">添加用户</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" id="removesBtn">删除多个</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">搜索</a>
            <input class="easyui-searchbox" data-options="prompt:'Please Input Value'" style="width:200px" id="searchval">
        </div>
        <div data-options="region:'center'">
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="用户信息" data-options="closed:true,iconCls:'icon-save'" style="width:500px;height:500px;padding: 10px">

                <div>
                    <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                        <!-- 避免修改的过程中新增数据，获取id将其隐藏 -->
                        <input type="hidden" name="_id">
                        <table cellpadding="2">
                            <tr>
                                <td>用户名:</td>
                                <td><input class="easyui-textbox" type="text" name="username" data-options="required:true" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>密码:</td>
                                <td><input class="easyui-textbox" type="password" name="password" data-options="required:true" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>年龄:</td>
                                <td><input class="easyui-textbox" type="number" name="age" data-options="required:true,validType:'number'" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td> <input type="radio" name="sex" value="true" id="man gender" style="border:none" /><label>男</label>
                                    <input type="radio" name="sex" value="false" id="woman gender" checked="checked" /><label>女</label></td>
                            </tr>
                            <tr>
                                <td>QQ:</td>
                                <td><input class="easyui-textbox" name="QQ" data-options="multiline:true" type="number" style="width:250px"></td>
                            </tr>

                            <tr>
                                <td>邮箱:</td>
                                <td><input class="easyui-textbox" name="emil" data-options="multiline:true" type="text" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>学历:</td>
                                <td>
                                    <select class="easyui-combobox" name="education" style="width:250px">
                                        <option value="小学">小学</option>
                                        <option value="初中">初中</option>
                                        <option value="高中">高中</option>
                                        <option value="专科">专科</option>
                                        <option value="本科" selected="selected">本科</option>
                                        <option value="研究生">研究生</option>
                                        <option value="博士生">博士生</option>
                                        <option value="博士后">博士后</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>地址:</td>
                                <td><input class="easyui-textbox" name="address" data-options="multiline:true" type="text" style="height:60px;width:250px"></td>
                            </tr>
                            <tr>
                                <td>身份证号码:</td>
                                <td><input class="easyui-textbox" name="carId" data-options="multiline:true" type="number" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>手机号码:</td>
                                <td><input class="easyui-textbox" name="phone" data-options="multiline:true" type="tel" style="width:250px"></td>
                            </tr>
                            <tr>
                                <td>日期:</td>
                                <td><input class="easyui-textbox" name="time" data-options="multiline:true" type="date" style="width:250px"></td>
                            </tr>
                        </table>
                    </form>
                </div>

                <div style="text-align:center;padding:20px 0;margin-right: 50px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px;background: green">确定</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px; background: red">取消</a>
                </div>


            </div>
        </div>
    </div>

    <script>
        $('#dg').datagrid({
            url: `${parent.globalUrl}users/list`,
            method: 'post',
            fit: true,
            pagination: true,
            columns: [
                [{
                    field: 'ck',
                    checkbox: true
                }, {
                    field: 'username',
                    title: '用户名',
                    width: 80
                }, {
                    field: 'age',
                    title: '年龄',
                    width: 50
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 50
                }, {
                    field: 'QQ',
                    title: 'QQ号',
                    width: 100
                }, {
                    field: 'emil',
                    title: '邮箱',
                    width: 100
                }, {
                    field: 'education',
                    title: '学历',
                    width: 80
                }, {
                    field: 'address',
                    title: '地址',
                    width: 100
                }, {
                    field: 'carId',
                    title: '身份证号码',
                    width: 150
                }, {
                    field: 'phone',
                    title: '手机号码',
                    width: 100
                }, {
                    field: 'time',
                    title: '日期',
                    width: 200
                }, {
                    field: '_id',
                    title: '操作',
                    width: 80,

                    formatter: function(value, row, index) {
                        console.log(row._id);
                        return `<a href="javascript:editData('${row._id}')">修改</a> <a href="javascript:deleData('${row._id}')">删除</a> `
                    }
                }]
            ],

        });
        //新增
        $('#addBtn').click(function() {
                $('#ff').form('clear');
                $('#dlg').dialog('open');
            })
            //删除多个
        $('#removesBtn').click(function() {
            deleteRows();
        })

        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function() {
                    if ($(this).form('enableValidation').form('validate')) {
                        console.log($('#ff').serializeJSON());
                        // 表单验证成
                        var formData = $("#ff").serializeJSON(); //引入插件获取json格式的数据
                        var checked = false;
                        if (formData._id.length > 0) { //根据上面的取的id判断id的长度
                            $.ajax({
                                url: `${parent.globalUrl}users/data/` + formData._id,
                                type: 'put',
                                data: formData,
                                gender: function() {
                                    for (var i = 0; i < $('#gender').length; i++) {
                                        if ($('#gender')[i].checked) {
                                            checked = true;
                                            break;
                                        }
                                    }
                                    // if (checked=false) {
                                    //     alert('必须选一个');
                                    // }
                                    if (checked == true) {
                                        if ($('input:radio[name="sex"]:checked').val()) {
                                            $('#man').text("男");
                                        } else {
                                            $('#woman').text("女");
                                        }
                                    }
                                }()

                            }).then(res => {
                                $('#dlg').dialog('close');
                                $("#dg").datagrid("reload");
                            })
                        } else {
                            //新增数据
                            $('#ff').form('clear');
                            delete formData._id;
                            $.ajax({
                                url: `${parent.globalUrl}users/data`,
                                type: 'post',
                                data: formData
                            }).then(res => {
                                $('#dlg').dialog('close');
                                $("#dg").datagrid("reload");
                            })
                        }

                    }
                }
            });
        }

        function clearForm() {
            $('#ff').form('clear');
        }
        //修改表格
        function editData(id) {
            $('#ff').form('load', `${parent.globalUrl}users/data/` + id);
            $('#dlg').dialog('open');

        }
        //删除数据函数调用
        function deleData(id) {
            $.messager.confirm("提示", "确认删除改条信息？", function(r) {
                if (r) {
                    $.ajax({
                        url: `${parent.globalUrl}users/data/` + id,
                        type: 'delete'
                    }).then(res => {
                        $('#dg').datagrid('reload');
                    })
                }
            })
        }
        //删除多个
        function deleteRows() {
            $.messager.confirm("提示", "确认删除改条信息？", function(r) {
                var selections = $('#dg').datagrid('getSelections');
                if (selections.length > 0) {
                    var ids = []; //空数组存在id
                    for (let i = 0; i < selections.length; i++) {
                        ids.push(selections[i]._id);
                    }
                    //通过ajax请求删除多个
                    $.ajax({
                        url: `${parent.globalUrl}users/data/removes`,
                        type: 'post',
                        data: {
                            ids: ids.toString()
                        }
                    }).then(res => {
                        $('#dg').datagrid('reload');
                    })
                }
            });
        }
        //查询列表
        $('#loadAllDataBtn').click(function() {
                cateId = null;
                $('#dg').datagrid({}).datagrid('reload');
            })
            //搜索内容
        $('#searchBtn').on('click', function() {
            var searchval = $('#searchval').val();
            $.ajax({
                    url: `${parent.globalUrl}users/allData`,
                    type: 'get'
                }).then(res => {
                    console.log(res);
                    for (let i = 0; i < res.length; i++) {
                        //console.log(res[i].username);//打印出所有用户名
                        //console.log(res.length);

                        if (searchval == res[i].username) {
                            // $('.datagrid-btable tbody tr').filter(':contains('+searchval+')').show();
                            $('.datagrid-btable tbody tr').hide().filter(':contains(' + searchval + ')').show();
                        } else {
                            console.log('没有匹配到');
                        }

                    }
                })
                //$('.datagrid-btable tbody tr').hide().filter(':contains('+searchval+')').show();
        })
    </script>
</body>

</html>